import {useEffect, useState} from 'react';
import Link from 'next/link';
import {List,Avatar, Spin} from 'antd'; // antd 提供的组件
import {StarOutlined,LikeOutlined,MessageOutlined} from '@ant-design/icons';

import style from './Lists.module.css';

import mdToHtml from '../../config/function/mdToHtml';

export default function Lists(props) {


    const [loading,setLoading] = useState(true);
    const articleList = props.articleList;

    useEffect( () => {
      

      setLoading(false);      
    }) 


    return (

        <>
        {/* todo: 文章 url 通过 query 获得  */}
        
            {articleList?<List
              loading={loading}  
              header={<div>最新文章</div>}
              itemLayout="vertical"
              dataSource={articleList}
              renderItem={item => (
                // actions 中的内容放在列表项的下方，extra 中的内容放在列表项的右方
                <Link href={`/article?id=${item.article_id}`}><a>
                  <List.Item
                    
                    key={item.article_id}
                    actions={[
                      <div><StarOutlined /> {item.star_num}</div>,
                      <div><LikeOutlined/> {item.star_num}</div>,
                      <div><MessageOutlined /> {item.comment_num}</div>
                      
                    ]}
                    extra={
                      <div className={style.article_img}>
                        <img src={item.img_url} alt="图片消失了~" width={214}/>
                      </div>
                    }
                  >
                    {/* 展示列表项的头部信息，可以加logo和标题等 */}
                    <List.Item.Meta 
                      avatar={<Avatar alt="logo" src={item.avatarUrl} size={{xs: 20, sm: 20, md: 20, lg: 24, xl: 30, xxl: 30}}/>}
                      title={<div>{item.title}</div>}
                      description={item.publish_date.split('T')[0]}
                    />
                    
                    {/* 文章简要介绍 */}
                    <div dangerouslySetInnerHTML={{__html:item.description?mdToHtml(item.description).html:'这篇文章没有简介'}}></div>

                  </List.Item>
                </a></Link>

              )}

            />:<List loading={loading} />}
        
        </>
    )
}